<template>
    <div class="comment-list-wrap">
        <div class="comment-list" v-if="props.data && props.data.length">
            <CommentItem
                v-for="item in props.data"
                :key="item.id"
                :data="item"
                :is-creater="isCreater"
                :assess-appraise-id="assessAppraiseId"
                :is-preview="isPreview"
                @update:list="emit('update:list')"/>
        </div>
        <div class="no-data" v-else>
			<NoData info="暂无评价，选课后可评价课程" url="no-data@2x.png" />
		</div>
        <div class="no-more" v-show="!props.hasMore && props.data.length">
            没有更多数据了
        </div>
    </div>
</template>

<script setup>
import CommentItem from './item.vue';
import NoData from '@/components/no-data.vue';

const emit = defineEmits(['update:list']);

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    hasMore: {
        type: Boolean,
        default: false
    },
    isCreater: {
        type: Boolean,
        default: false
    },
    assessAppraiseId: {
        type: String, 
        default: ''
    },
    isPreview: { // 是否是预览状态
        type: Boolean,
        default: false 
    }
});
</script>

<style lang="scss" scoped>
.comment-list-wrap {
    .no-more {
        width:100%;
        padding-top: 30px;
        text-align: center;
        color:rgba(0, 0, 0, 0.5);
    }
}
</style>